<!DOCTYPE html>
<html>    
    <body>
        <style>
            .master-stroke #animation-content .replay-button
            {
                height: 64px;
                width: 64px;
            }

            .master-stroke #animation-content .close-button
            {
                position: absolute;
                right: 0px;
                top: 0px;
                margin-right: 8px;
                padding-left: 0px;
                padding-right: 0px;
                background-color: white;
                background-image: none;
            }

            .master-stroke #animation-content .close-button:hover
            {
                background-color: rgb(238, 238, 238);
            }
        </style>
        <script type="text/javascript">     
            require
            (
                ["lib/knockout",
                 "MasterStroke/Bindings/ShapesBinding"],
                function(ko)
                {
                    var dataSource = ko.dataFor($("#animation-content")[0]);
                    dataSource.start();
                }
            );            
        </script>
        <div id="animation-content">

            <!-- Replay button -->
            <div class="vertically-center replay-button"                    
                    data-bind="visible: replayVisible, event: {click: start}">
                <a class="m-btn" title="Start">
                    <i class="icon-play"></i>
                </a>
            </div>

            <a class="m-btn close-button" title="Exit" data-bind="{click: closeCommand}">
                <i class="icon-remove"></i>
            </a>

            <!-- Animation SVG -->
            <div data-bind="with: selectedFrame">
                <div data-bind="shapesBind: shapes">
                    <div class="thumbnail-svg-container">
                        <svg xmlns="http://www.w3.org/2000/svg" 
                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                 version="1.1"                                 
                                 viewBox="0 0 2000 1500">                         
                        </svg>
                    </div>
                </div>
            </div>
        </div>       
    </body>    
</html>